<%--
  Created by IntelliJ IDEA.
  User: 97990
  Date: 2022/7/7
  Time: 12:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="/common/head.jsp"></jsp:include>
    <title>品牌页</title>
</head>
<body>
<jsp:include page="/common/nav.jsp"></jsp:include>
<div class="container">
    <%--条件查询--%>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-info">
                <div class="panel-heading">条件查询</div>
                <div class="panel-body">

                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-1 control-label">品牌名称</label>
                            <div class="col-sm-4">
                                <input type="text" id="queryBrandName" class="form-control" placeholder="请输入品牌名称">
                            </div>
                        </div>

                        <div class="btn-group col-lg-offset-5" role="group">
                            <button type="button" class="btn btn-success" onclick="search();">查询</button>
                            <button type="reset" class="btn btn-warning">重置</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <%--按钮--%>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <button type="button" class="btn btn-primary" onclick="addBrand();">
                    <span class="glyphicon glyphicon-plus"></span> 增加
                </button>
                <button type="reset" class="btn btn-danger" onclick="delBatch();">
                    <span class="glyphicon glyphicon-trash"></span> 批量删除
                </button>
            </div>
        </div>
    </div>

    <%--列表展示--%>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-success">
                <div class="panel-heading">品牌列表</div>

                <div class="panel-body">
                    <table id="myTable" class="display table-bordered">
                        <thead>
                        <th>选择</th>
                        <th>品牌名称</th>
                        <th>品牌logo</th>
                        <th>操作</th>
                        </thead>
                        <tfoot class="text-center">
                        <th>选择</th>
                        <th>品牌名称</th>
                        <th>品牌logo</th>
                        <th>操作</th>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<%--新增弹框--%>
<div id="addDiv" style="display: none">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">品牌名称:</label>
            <div class="col-sm-8">
                <input type="text" id="brandName" class="form-control"  placeholder="请输入品牌名称">
            </div>
        </div>
        <div class="form-group" style="height: 400px">
            <label class="col-sm-3 control-label">logo:</label>
            <div class="col-sm-8" style="height: 300px">
                <input type="file" id="logo" name="imgFile"/>
                <input type="text" id="logoPath"/>
            </div>
        </div>
    </form>
</div>

<%--修改弹框--%>
<div id="editDiv" style="display: none">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">品牌名称:</label>
            <div class="col-sm-8">
                <input type="hidden" id="brandId"/>
                <input type="text" id="edit_brandName" class="form-control"  placeholder="请输入品牌名称">
            </div>
        </div>
        <div class="form-group" style="height: 400px">
            <label class="col-sm-3 control-label">logo:</label>
            <div class="col-sm-8" style="height: 300px">
                <input type="file" id="edit_logo" name="imgFile"/>
                <input type="text" id="edit_logoPath"/>
                <input type="text" id="edit_oldLogoPath"/>
            </div>
        </div>
    </form>
</div>

<jsp:include page="/common/script.jsp"></jsp:include>
<script>
    $(function (){
        brandTableList();
    })

    //新增
    var addAlert;
    function addBrand(){
        //备份修改弹框
        var addDivHtml = $("#addDiv").html();
        //初始化文件上传
        initImage();
        addAlert = bootbox.dialog({
            title:"<b>新增品牌</b>",
            message:$("#addDiv form"),//另一种方式.children()
            size:"normal",
            buttons: {
                confirm: {
                    label: '<span class="glyphicon glyphicon-ok"></span>确定',
                    className: 'btn-info',
                    callback:function (result){
                        var v_param = {};
                        v_param.brandName = $("#brandName", addAlert).val();
                        v_param.logo = $("#logoPath", addAlert).val();
                        $.ajax({
                            type:"post",
                            url:"/brand/add.do",
                            data:v_param,
                            success:function (res){
                                if (res.code == 200){
                                    search();
                                }
                            }
                        })
                    },
                },
                cancel: {
                    label: '<span class="glyphicon glyphicon-remove"></span>取消',
                    className: 'btn-danger'
                }
            },

        })
        //还原修改弹框
        $("#addDiv").html(addDivHtml);
    }

    // 渲染文件上传组件
    function initImage() {
        // 配置信息
        var setting = {
            language: 'zh',
            uploadUrl: "/file/uploadImage.do", // 后台上传文件的url地址
            showUpload : false,
            showRemove : false
        };
        // 渲染组件
        // 回调函数，fileuploaded
        $("#logo").fileinput(setting).on("fileuploaded", function (event, r, previewId, index) {
            // 服务端响应给客户端的数据{code:,msg:,data:}
            var v_result = r.response;
            if (v_result.code == 200) {
                $("#logoPath",addAlert).val(v_result.data);
            }
        });
    }

    function search(){
        var v_param = {}
        v_param.brandName = $("#queryBrandName").val();

        brandTable.settings()[0].ajax.data = v_param;
        brandTable.ajax.reload();
    }

    //列表展示
    function brandTableList(){
        brandTable = $("#myTable").DataTable({
            // 开启Datatables服务器模式
            // DataTables有两种基本的工作模式可供选择：
            // 客户端处理模式——此模式下如：过滤、分页、排序的处理都在浏览器中进行。
            // 服务器端处理模式——此模式下如：过滤、分页、排序的处理都放在服务器端进行。
            serverSide: true,

            language: {
                "url":'/js/DataTables/Chinese.json'
            },

            //开启垂直滚动条（X水平，Y垂直）
            // "scrollY": true ,
            //设置固定高度为200px 数据量溢出时出现滚动条
            // "scrollY": "200px",
            // "scrollCollapse": "true",

            //禁用排序
            "ordering": false,

            //禁用本地搜索
            "searching": false,

            // 设置每页显示条数下拉框的值
            "lengthMenu": [3, 5, 7, 10],

            "ajax": {
                "type":"post",
                "url":"/brand/list.do",
            },

            "columns": [// 返回数据是对象列表的时候需要使用如下方式与字段一一对应
                {"data": "id",
                    render:function (data){
                        return '<input type="checkbox" name="ids" value="'+data+'"/>'
                    }
                },
                {"data": "brandName" },
                {"data": "logo",
                    render:function (data){
                        return '<img src="'+data+'" width="50px" height="50px"/>'
                    }
                },
                {"data": "id",
                    render:function (data, type, row, meta){
                        return '<div class="btn-group">'+
                            '<button type="button" class="btn btn-warning btn-sm" onclick="updateAlert(\''+data+'\')"><span class="glyphicon glyphicon-pencil"></span> 编辑</button>'+
                            '<button type="button" class="btn btn-danger btn-sm" onclick="deleteBrand(\''+data+'\')"><span class="glyphicon glyphicon-trash"></span> 删除</button>'+
                            '</div>';
                    }
                },
            ]
        });
    }

    //回显、修改
    var editAlert;
    function updateAlert(id){

        //备份修改弹框
        var editDivHtml = $("#editDiv").html();

        $.ajax({
            type:"post",
            url:"/brand/findBrand.do",
            data:{"id":id},
            success:function (res){
                if (res.code == 200){
                    var v_brand = res.data;
                    var arr = [];
                    arr.push(v_brand.logo);
                    //初始化文件上传
                    editInitImage(arr);

                    $("#edit_oldLogoPath").val(v_brand.logo);
                    $("#edit_brandName").val(v_brand.brandName);

                    editAlert = bootbox.dialog({
                        title:"<b>修改品牌信息</b>",
                        message:$("#editDiv form"),//另一种方式.children()
                        size:"normal",
                        buttons: {
                            confirm: {
                                label: '<span class="glyphicon glyphicon-ok"></span>确定',
                                className: 'btn-info',
                                callback:function (result){
                                    var v_param = {};
                                    v_param.id = id;
                                    v_param.brandName = $("#edit_brandName",editAlert).val();
                                    v_param.logo = $("#edit_logoPath",editAlert).val()//新logo
                                    v_param.oldLogo = $("#edit_oldLogoPath",editAlert).val();//旧logo
                                    $.ajax({
                                        type:"post",
                                        url:"/brand/update.do",
                                        data:v_param,
                                        success:function (res){
                                            if (res.code == 200){
                                                search();
                                            }
                                        }
                                    })
                                },
                            },
                            cancel: {
                                label: '<span class="glyphicon glyphicon-remove"></span>取消',
                                className: 'btn-danger'
                            }
                        },

                    })
                    //还原
                    $("#editDiv").html(editDivHtml);
                }
            }
        })
    }

    // 渲染文件上传组件-->修改
    function editInitImage(imgArr) {
        // 配置信息
        var setting = {
            language: 'zh',
            uploadUrl: "/file/uploadImage.do", // 后台上传文件的url地址
            showUpload : false,
            showRemove : false,
            initialPreview:imgArr,
            initialPreviewAsData: true
        };
        // 渲染组件
        // 回调函数，fileuploaded
        $("#edit_logo").fileinput(setting).on("fileuploaded", function (event, r, previewId, index) {
            // 服务端响应给客户端的数据{code:,msg:,data:}
            var v_result = r.response;
            if (v_result.code == 200) {
                $("#edit_logoPath",editAlert).val(v_result.data);
            }
        });
    }

    //删除
    function deleteBrand(id){
        bootbox.confirm({
            size:"small",
            titile:"提示框",
            message:"确认删除吗？",
            buttons: {
                confirm: {
                    label: '<span class="glyphicon glyphicon-ok"></span>确定',
                    className: 'btn-success',

                },
                cancel: {
                    label: '<span class="glyphicon glyphicon-remove"></span>取消',
                    className: 'btn-danger'
                }
            },
            callback:function (result){
                if (result){
                    $.ajax({
                        type:"post",
                        url:"/brand/delete.do?id="+id,
                        success:function (result){
                            //刷新
                            search();
                            if (result.code == 200){
                                // 提示
                                bootbox.alert({
                                    message: "<span class='glyphicon glyphicon-exclamation-sign'></span>"+result.msg,
                                    size: 'small',
                                    title: "提示信息"
                                });
                            }
                        },error(){
                            // 提示
                            bootbox.alert({
                                message: "<span class='glyphicon glyphicon-exclamation-sign'></span>删除失败",
                                size: 'small',
                                title: "提示信息"
                            });
                        }
                    })
                }
            }

        })
    }

    //批量删除
    function delBatch(){
        var idArr = [];
        $("input[name='ids']:checked").each(function (){
            idArr.push(this.value);
        })
        if (idArr.length>0){
            // 证明用户选择了，所以要提醒是否要删除
            bootbox.confirm({
                titile:"提示信息",
                message:"你确定删除吗?",
                buttons: {
                    confirm: {
                        label: '<span class="glyphicon glyphicon-ok"></span>确定',
                        className: 'btn-success'
                    },
                    cancel: {
                        label: '<span class="glyphicon glyphicon-remove"></span>取消',
                        className: 'btn-danger'
                    }
                },
                callback:function (result){
                    if (result){
                        $.ajax({
                            type:"post",
                            url:"/brand/deleteBatch.do",
                            data:{"ids":idArr.join(",")},//join方法将js数组转换为指定符号分割的字符串
                            success:function (result){
                                // 刷新
                                search();
                                // 提示
                                bootbox.alert({
                                    message: "<span class='glyphicon glyphicon-exclamation-sign'></span>删除成功",
                                    size: 'small',
                                    title: "提示信息"
                                });
                            },error(){
                                // 提示
                                bootbox.alert({
                                    message: "<span class='glyphicon glyphicon-exclamation-sign'></span>删除失败",
                                    size: 'small',
                                    title: "提示信息"
                                });
                            }
                        })
                    }
                }
            })
        }else {
            // 没有选择，提醒至少选中一项
            bootbox.alert({
                message: "<span class='glyphicon glyphicon-exclamation-sign'></span>请选择要删除的记录",
                size: 'small',
                title: "提示信息"
            });
        }

    }

</script>
</body>
</html>
